<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>用户管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container mt-4">
    <h2>用户管理</h2>

    <!-- 新增按钮 -->
    <button @click="showAddModal = true" class="btn btn-primary mb-3">新增用户</button>

    <!-- 交易表格 -->
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>用户ID</th>
            <th>用户类型</th>
            <th>用户名称</th>
            <th>登录账号</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in userList" :key="user.userId">
            <td>{{ user.userId }}</td>
            <td>{{ getTypeLabel(user.userType) }}</td>
            <td>{{ user.userName }}</td>
            <td>{{ user.userLogin }}</td>
            <td>{{ user.userPwd }}</td>
            <td>
                <button @click="openEditModal(user)" class="btn btn-info btn-sm me-1">详情</button>
                <button @click="deleteUser(user.userId)" class="btn btn-danger btn-sm">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- 新增/编辑交易对话框 -->
    <div v-if="showAddModal" class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ isEditing ? '编辑用户' : '新增用户' }}</h5>
                    <button @click="closeModal" class="btn-close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label class="form-label">姓名</label>
                            <input v-model="userDetail.userName" type="text" class="form-control" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">账号</label>
                            <input v-model.number="userDetail.userLogin" type="text" class="form-control" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">用户类型</label>
                            <select v-model="userDetail.userType" class="form-select" required>
                                <option v-for="type in userTypes" :value="type.value" :key="type.value">
                                    {{ type.label }}
                                </option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button @click="submitUser" class="btn btn-success">{{ isEditing ? '更新' : '提交' }}</button>
                    <button @click="closeModal" class="btn btn-secondary">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const { createApp, ref, onMounted } = Vue;

createApp({
    setup() {
        const userList = ref([]);
        const userDetail = ref({ userType: 0, userLogin: null, userName: null, userPwd: null });
        const showAddModal = ref(false);
        const isEditing = ref(false);
        // 交易类型枚举定义（与后端 TransactionType.java 保持一致）
        const userTypes = [
            { value: 0, label: '管理员' },
            { value: 1, label: '普通用户' }
        ];

        // 获取交易记录（带分页）
        function queryUserList() {
            // 替换为实际接口地址，支持 page 和 size 参数
            fetch(`/user/queryUserList`)
                .then(res => res.json())
                .then(data => {
                    userList.value = data || [];
                });
        }

        // 打开新增弹窗
        function openAddModal() {
            userDetail.value = { userType: 0, userLogin: null, userName: null, userPwd: null };
            isEditing.value = false;
            showAddModal.value = true;
        }

        // 打开编辑弹窗
        function openEditModal(user) {
            userDetail.value = { ...user }; // 拷贝对象避免直接修改原数据
            isEditing.value = true;
            showAddModal.value = true;
        }

        // 关闭弹窗
        function closeModal() {
            showAddModal.value = false;
        }

        // 提交新增用户
        function submitUser() {
            if (isEditing.value) {
                fetch("/user/updateUser", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(userDetail.value)
                }).then(() => {
                    queryUserList();
                    showAddModal.value = false;
                    closeModal();
                });
            }else {
                fetch('/user/createUser', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(userDetail.value)
                }).then(() => {
                    queryUserList();
                    userDetail.value = { userType: 0, userLogin: null, userName: null, userPwd: null };
                    showAddModal.value = false;
                });
            }

        }

        // 删除用户
        function deleteUser(id) {
            if (confirm('确定要删除该用户吗？')) {
                fetch(`/user/deleteUser/${id}`, {
                    method: 'POST',
                }).then(() => {
                    queryUserList();
                });
            }
        }

        function getTypeLabel(typeValue) {
            const type = userTypes.find(t => t.value === typeValue);
            return type ? type.label : '未知类型';
        }

        onMounted(() => {
            queryUserList();
        });

        return {
            userList,
            userDetail,
            showAddModal,
            userTypes,
            submitUser,
            deleteUser,
            openAddModal,
            openEditModal,
            closeModal,
            getTypeLabel
        };
    }
}).mount('#app');
</script>
</body>
</html>